<template>
  <div v-loading="loading">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <el-button size="medium" type="primary" @click="visible = true">添加类型</el-button>
      </div>
      <div class="d-flex">
        <el-input size="medium" placeholder="请输入内容" prefix-icon="el-icon-search" 
          class="mr-3" v-model="name">
        </el-input>
        <el-button type="primary" size="medium" icon="el-icon-search" @click="getAllTypes">搜索</el-button>
      </div>
    </div>
    <el-table :data="types" class="mt-3" border>
      <el-table-column type="index" label="序号" align="center" width="100">
      </el-table-column>
      <el-table-column prop="name" label="类型名称">
      </el-table-column>
      <!-- <el-table-column label="当前状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.state === 1 ? 'success' : 'error'">
            {{ scope.row.state === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column> -->
      <el-table-column label="最后修改时间" width="160" align="center">
        <template slot-scope="scope">
          {{$formatDateTime(scope.row.updateDate)}}
        </template>
      </el-table-column>
      <el-table-column prop="userId" label="修改人" width="120" align="center">
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template  slot-scope="scope">
          <el-button type="text" size="small" @click="editorRow(scope.row)">修改</el-button>
          <el-popconfirm :title="'确认删除 ' + scope.row.name +' 吗？'"
            @onConfirm="deleteRow(scope.row)">
            <el-button type="text" size="small" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增的类型 -->
    <el-dialog :title="`${row ? '修改' : '新增'}类型`" :visible.sync="visible" @closed="closed" width="420px">
      <el-form :model="form">
        <el-form-item label="类型名称" :rules="[{ required: true, message: '请输入类型名称', trigger: 'blur' }]">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="addTag" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api'
export default {
  title: "文章类型",
  data() {
    return {
      name: '',
      types: [],
      visible: false,
      loading: false,
      form: {
        name: '',
      },
      row: null
    }
  },
  created() {
    this.getAllTypes()
  },
  methods: {
    getAllTypes() {
      this.$get(this.$paramsConnect(api.type, {name : this.name})).then(res => {
        this.types = res.data.data
      })
    },
    addTag() {
      this.loading = true
      const { form, userId, row } = this
      let method = "$post"
      let params = { userId }
      if (row) {
        method = "$put"
        params.id = row.id
      }
      this[method](api.type, Object.assign({}, form, params)).then(res => {
        this.$message.success(`类型${row ? '修改' : '添加'}成功`);
        this.visible = false
        this.getAllTypes()
      }).finally(() => {
        this.loading = false
      })
    },
    editorRow(row) {
      this.row = row
      this.form.name = row.name
      this.visible = true
    },
    deleteRow(row) {
      this.loading = true
      this.$delete(`${api.type}/${row.id}`).then(res => {
        this.$message.success('标签删除成功');
        this.getAllTypes()
      }).finally(() => {
        this.loading = false
      })
    },
    closed() {
      this.row = null
      this.form.name = ""
    }
  },
  computed: {
    userId() {
      return this.$store.state.user.user.userId
    }
  }
}
</script>
<style lang="scss">
</style>